var app = new Vue({
    el: '#app',
    data: {
        isShoping: true,
        prducts: [
            { id: 1, prductName: "苹果手机", price: 10000, stock: 10 },
            { id: 2, prductName: "华为手机", price: 12000, stock: 8 },
            { id: 3, prductName: "三星手机", price: 8000, stock: 5 },
            { id: 4, prductName: "苹果", price: 5, stock: 20 },
            { id: 5, prductName: "香蕉", price: 3.5, stock: 20 }
        ],
        shopPrducts: [
            //id  商品名称  单价 购买数量 操作
        ]
    },
    methods: {
        //加入购物车则传递id，过滤出该id的商品对象,处理一下，加入购物车数组。
        //多次加入购物车则增加数量而不增加对象
        addShopProduct: function (id) {
            //找到对应商品的对象，处理一下，加入购物车数组
            let obj;
            this.prducts.filter(function (item) {
                if (item.id == id) {
                    return obj = {
                        id: item.id,
                        prductName: item.prductName,
                        price: item.price,
                        quantity: 1
                    }
                }
            })
            //但是，不能每条都这样处理，重复加购的商品则需要只加购买数量而不加新的购物车信息记录
            if (this.shopPrducts.length == 0) {
                this.shopPrducts.push(obj)

                //数组长度为0则push一个obj进去，不为0，则确认是否加购过
            } else {
                //确认是否加购过,这里的isshopId是临时的，每次点击都会刷新，因为过滤出来的是对象，是引用而不是复制
                let isshopId = this.shopPrducts.filter(item => {
                    return item.id == id
                })

                //加购过则修改购买数量
                if (isshopId.length > 0) {
                    //购物车找到该条购买信息 
                    isshopId[0].quantity += 1
                } else {
                    //否则直接push进去
                    this.shopPrducts.push(obj)
                }
            }
        },
        //不感兴趣则传递回id，将数组中对应的数据删除(过滤重新赋值)
        del: function (id) {
            console.log(id);

            this.prducts = this.prducts.filter(item => {

                return item.id != id
            })
        },

        //状态，是在购物还是结算，结算则隐藏购物页面，渲染购物车页面
        settleAccounts: function () {
            this.isShoping = false;

        },

        //增加购物数量
        addQuantity: function (id) {
            console.log(id);
            //该数据的库存数量
            let productStock = this.prducts.filter(item => {
                return item.id == id
            })
            console.log(productStock[0].stock);//库存数量

            //添加数据
            this.shopPrducts.filter(item => {

                if (item.id == id) {

                    if (item.quantity < productStock[0].stock) {
                        item.quantity++;

                    } else {
                        alert("亲，这是最后一件了呢！要不您点一点其他商品吧")
                    }
                }
            })
        },

        //减少购物数量
        reduceQuantity: function (id) {
            console.log(id);
            //该数据的库存数量
            let productStock = this.prducts.filter(item => {
                return item.id == id
            })
            console.log(productStock[0].stock);//库存数量

            //添加数据
            this.shopPrducts.filter(item => {

                if (item.id == id) {

                    if (item.quantity > 1) {
                        item.quantity--;

                    } else {
                        if (confirm("亲，这是最后一件了呢！确定要取消购买该商品吗？")) {

                            this.remove(item.id)

                        }
                    }
                }
            })
        },


        //移除购物车的某项商品
        remove: function (id) {
            
            this.shopPrducts = this.shopPrducts.filter(item => {
                return item.id != id
            })

        },

        //付款成功，清空购物车，渲染购物页面，完成库存数量的同步
        payment: function () {
            //购物车页面--购买数量
            //商品页面--库存数量

            //获得购物车数组
            let shopArr=this.shopPrducts;
            console.log(shopArr);

            //获得商品数组

            let products=this.prducts;
            console.log(products);
            

            for (let i = 0; i < products.length; i++) {
                console.log(products[i].stock);
                console.log("end");
                for (let j = 0; j < shopArr.length; j++) {
                    if (products[i].id==shopArr[j].id) {
                        products[i].stock=products[i].stock-shopArr[j].quantity
                        
                    }      
                }
            }
            alert("结算成功了，继续购买吧？")
            this.shopPrducts=[]
            this.isShoping = true;
            this.monitorQuantity(this.prducts)

        },
        monitorQuantity:function(prducts){
            for (let i = 0; i < prducts.length; i++) {

                if (prducts[i].stock<=0) {
                    alert(`${prducts[i].prductName}的库存已经见底了，请注意`)
                    
                }
                
                
            }
            
            
            
        }

    },
    computed: {
        //结算总价格
        totalPrice: function () {
            //循环遍历购物车数组里的商品信息，总价=商品单价*件数
            let total = 0;

            for (let i = 0; i < this.shopPrducts.length; i++) {

                var item = this.shopPrducts[i]
                total += item.price * item.quantity

            }
            return total
        },
        //已加购件数
        shopTotal: function () {
            let shopTotals = 0;

            for (let i = 0; i < this.shopPrducts.length; i++) {
                shopTotals = shopTotals + this.shopPrducts[i].quantity;
            }
            return shopTotals

        }

    }
})
